<!--
 * @Author: yfp
 * @Date: 2024-03-30 20:00:53
 * @LastEditors: yehongbo 1394168736@qq.com
 * @LastEditTime: 2024-07-08 15:44:50
 * @Description: 
-->

<template>
  <div class="pro-title">保护定值修改行为识别</div>
  <div class="logo-box">
    <img src="@/assets/logo.png" />
  </div>

  <el-tabs type="border-card" v-model="activeName" @tab-click="tabClick">
    <el-tab-pane label="历史记录" name="1">
      <HisRecord @tabVal="changTab"></HisRecord>
    </el-tab-pane>
    <el-tab-pane label="告警详情" name="2">
      <keep-alive>
        <AlarmDetail :file-name="name" :file-name-id="nameId" :pageTime="time"></AlarmDetail>
      </keep-alive>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from "element-plus"
import HisRecord from '@/components/HisRecord.vue'
import AlarmDetail from '@/components/AlarmDetail.vue'

let activeName = ref('1');
let name = ref('');
let nameId = ref('');
let time = ref('')
const changTab = (val, nameVal, datailId, pageTime) => {
  activeName.value = '2';
  name.value = nameVal;
  nameId.value = datailId;
  time.value = pageTime
}
// let showTB = ref(false);
const tabClick = (tab) => {
  if (tab.index == 1) {
    // ElMessage.error('请选择一条数据查看！');
  }
}
</script>

<style scoped>
.pro-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 57px;
  /* padding: 30px 0 30px; */
  font-size: 26px;
  font-weight: bold;
  color: #409eff;
  text-align: center;
  background: hsla(0, 0%, 100%, .5);
}

:deep(.el-tabs__item) {
  font-size: 16px;
  font-weight: bold;
}

/* :deep(.el-tabs) {
  #dcdfe6
  border: none !important;
} */
.logo-box {
  height: 57px;
  display: flex;
  align-items: flex-end;
  position: fixed;
  right: 0px;
  top: 0px;
}

.logo-box img {
  width: 181px;
  height: 43px;
  display: inline-block;
  background-repeat: no-repeat;
}
</style>
